import React, { FC } from 'react';
import {
  FormPanel,
  FormPanelStatus,
  FormPanelBtnDisplay,
  FormPanelObject,
  InputType,
  MinioUploadListType,
} from 'lfun-bg-comp';
import { useLocation } from 'react-router-dom';
import { Button, Row, Col } from 'antd';
import _ from 'lodash';
import { GENDER } from '@/constant/basicOptions';
import utils from '@/utils';
import { ID_TYPE, TRANSFER_REASON } from '@/constant/studentOptions';
import { ETHNICITIES } from '@/constant/ethnicity';
import {
  getCityOptions,
  getCountryOptionsByCity,
  getProvinceOptions,
  getProvinceCityCascader,
} from '@/service/options';
import { getTransactionInfo } from '@/service/student/instudent';
import Logs from '@/view/student/component/logs';

const Groups: FC<{ hideLogs?: boolean }> = ({ hideLogs }) => {
  const [values, setValues] = React.useState<any>({});
  //const location = useLocation();
  // const { id } = useParams();
  // const apply_id = Number(id);
  const location = useLocation();
  const [showLogs, setShowLogs] = React.useState<boolean>(false);

  const init = async () => {
    utils.showLoading();
    const r = await getTransactionInfo(location.state.process_instance_id);
    if (r.success) {
      setValues(utils.flattenObject(r.data));
    }
    utils.hideLoaing(r.success);
  };

  React.useEffect(() => {
    init();
  }, []);

  const baiscInfoList = [
    {
      title: '学生信息',
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      inputs: [
        {
          label: '姓名',
          name: 'student_info.student_name',
          key: 'student_info.student_name',
        },
        {
          label: '性别',
          name: 'student_info.student_gender',
          key: 'student_info.student_gender',
          inputType: 'select',
          renderOption: GENDER,
        },
        {
          label: '民族',
          name: 'ethnicity',
          key: 'ethnicity',
          required: false,
          inputType: InputType.select,
          renderOption: ETHNICITIES,
        },
        {
          label: '证件类型',
          name: 'student_info.id_type',
          key: 'student_info.id_type',
          inputType: 'select',
          renderOption: ID_TYPE,
        },
        {
          label: '证件号码',
          name: 'student_info.id_number',
          key: 'student_info.id_number',
          inputType: 'text',
        },
        {
          label: '籍贯地行政区',
          name: 'native_place_district',
          key: 'native_place_district',
          required: true,
        },
        {
          label: '学籍号',
          name: 'student_info.edu_number',
          key: 'student_info.edu_number',
        },
        {
          label: '出生年月',
          name: 'student_info.birthday',
          key: 'student_info.birthday',
        },
        {
          label: '户口所在地（详细）',
          name: 'residence_address_detail',
          key: 'residence_address_detail',
          required: true,
          textRange: [0, 50],
        },
      ],
    },
  ];
  const checkOutList = [
    {
      title: '转出校信息',
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      inputs: [
        {
          label: '省市',
          name: 'student_transaction_out.province_id',
          key: 'province',
          required: true,
          inputType: InputType.select,
          relationFields: ['student_transaction_out.city_id'],
          renderOption: async () => {
            const list = await getProvinceOptions();
            return list;
          },
        },
        {
          label: '区县',
          name: 'student_transaction_out.area_id',
          key: 'student_transaction_out.area_id',
          inputType: InputType.select,
          required: true,
          renderOption: async (form: FormPanelObject) => {
            const list = await getCountryOptionsByCity(form, 'student_transaction_out.city_id');
            return list;
          },
        },
        {
          label: '学校名称',
          name: 'student_transaction_out.school_name',
          key: 'student_transaction_out.school_name',
        },
        {
          label: '年级',
          name: 'student_transaction_out.grade_name',
          key: 'student_transaction_out.grade_name',
        },
        {
          label: '班级',
          name: 'student_transaction_out.classes',
          key: 'student_transaction_out.classes',
        },
      ],
    },
  ];
  const checkInList = [
    {
      title: '转入校信息',
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      inputs: [
        {
          label: '省市',
          name: 'student_transaction_in.province_id',
          key: 'student_transaction_in.province_id',
          inputType: 'select',
          relationFields: ['student_transaction_in.city_id'],
          renderOption: async () => {
            const list = await getProvinceOptions();
            return list;
          },
        },
        {
          label: '学校区县',
          name: 'student_transaction_in.area_id',
          key: 'student_transaction_in.area_id',
          inputType: 'select',
          renderOption: async (form: FormPanelObject) => {
            const list = await getCountryOptionsByCity(form, 'student_transaction_in.city_id');
            return list;
          },
        },
        {
          label: '学校名称',
          name: 'student_transaction_in.school_name',
          key: 'student_transaction_in.school_name',
        },
        {
          label: '年级',
          name: 'student_transaction_in.grade_name',
          key: 'student_transaction_in.grade_name',
        },
        {
          label: '班级',
          name: 'student_transaction_in.classes',
          key: 'student_transaction_in.classes',
        },
        {
          label: '转入日期',
          name: 'student_transaction_in.transfer_time',
          key: 'student_transaction_in.transfer_time',
          inputType: 'text',
        },
        {
          label: '转学原因',
          name: 'transfer_reason',
          key: 'transfer_reason',
          required: true,
          inputType: InputType.select,
          renderOption: TRANSFER_REASON,
          textRange: [0, 20],
        },
        {
          label: '备注',
          name: 'remark',
          key: 'remark',
          span: 24,
          props: {
            labelCol: { span: 2 },
            wrapperCol: { span: 20 },
          },
          inputType: InputType.textarea,
          textRange: [0, 200],
        },
        {
          label: '上传附件',
          name: 'doc_upload',
          key: 'doc_upload',
          span: 24,
          props: {
            labelCol: { span: 2 },
            wrapperCol: { span: 20 },
          },
          inputType: 'minioUpload',
          inputProps: {
            listType: MinioUploadListType.picture,
            text: '浏览',
            placeholder: '请上传附件为图片格式（.png/.jpg）',
            maxCount: 1,
            uploadSrv: '/school/v1/storage/school-upload-uri',
          },
          formatSubmitValue: (value: string) => {
            if (value === undefined || value === 'undefined') return '';
            return value;
          },
        },
      ],
    },
  ];

  return (
    <>
      {hideLogs ? (
        <></>
      ) : (
        <Row>
          <Col span="24">
            <Button
              style={{
                float: 'right',
                marginBottom: '10px',
              }}
              type="primary"
              onClick={() => setShowLogs(true)}
            >
              审批日志
            </Button>
            <Logs show={showLogs} onClose={() => setShowLogs(false)} title={values.student_name} />
          </Col>
        </Row>
      )}
      <FormPanel
        template={baiscInfoList}
        buttonsDisplay={FormPanelBtnDisplay.none}
        values={values}
        formStatus={FormPanelStatus.nonEdit}
        onValuesChange={sv => {
          setValues(sv);
        }}
      />
      <FormPanel
        key="setOutInfoForm"
        template={checkOutList}
        values={values}
        buttonsDisplay={FormPanelBtnDisplay.none}
        formStatus={FormPanelStatus.nonEdit}
      />
      <FormPanel
        key="setInInfoForm"
        template={checkInList}
        values={values}
        buttonsDisplay={FormPanelBtnDisplay.none}
        formStatus={FormPanelStatus.nonEdit}
      />
    </>
  );
};

export default Groups;
Groups.defaultProps = {
  hideLogs: true,
};
